<template>
  <div ref="test" class="chat-main"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    echartData: Object
  },
  watch: {
    'echartData.xAxis'() {
      this.drawEcharts();
      console.log(this.echartData);
    }
  },
  methods: {
    // 获取数据 刷新数据
    drawEcharts() {
      var myChart = echarts.init(this.$refs.test, 'dark');

      // 指定图表的配置项和数据
      var option = {
        backgroundColor: '#121626',
        color: ['#DE6173', '#333FFF', '#23B899'],

        grid: {
          left: '3%',
          right: '30px',
          bottom: '20px',
          top: '20px',
          containLabel: true
        },
        legend: {
          data: ['出站量', '进站量']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.echartData.xAxis
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '30%']
        },
        series: [
          {
            name: '出站量',
            type: 'line',
            smooth: 0.3,
            lineStyle: {
              width: 1
            },
            markPoint: {
              data: [{ type: 'max', name: '最大值' }]
            },
            data: this.echartData.series1
          },
          {
            name: '进站量',
            type: 'line',
            smooth: 0.3,
            lineStyle: {
              width: 1
            },
            markPoint: {
              data: [{ type: 'max', name: '最大值' }]
            },
            data: this.echartData.series2
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  mounted() {
    this.drawEcharts();
  }
};
</script>

<style></style>
